<%--
  Created by IntelliJ IDEA.
  User: 陈滨进
  Date: 2021/3/30
  Time: 15:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- CSS -->
    <link rel="stylesheet" href="shangchuan/css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="shangchuan/css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="shangchuan/css/magnific-popup.css">
    <link rel="stylesheet" href="shangchuan/css/select2.min.css">
    <link rel="stylesheet" href="shangchuan/css/admin.css">

    <!-- Favicons -->
    <link rel="icon" type="image/png" href="shangchuan/icon/favicon-32x32.png" sizes="32x32">
    <link rel="apple-touch-icon" href="shangchuan/icon/favicon-32x32.png">

    <meta name="影片介绍" content="">
    <meta name="keywords" content="">
    <meta name="author" content="Dmitry Volkov">

    <title>PersonalCenter</title>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <%@include file="common/utils.jsp" %>

    <%--收藏的删除--%>


    <%--<style type="text/css">--%>
    <%--.col-12{--%>
    <%--/*display: none;*/--%>

    <%--}--%>
    <%--</style>--%>
</head>
<body>
<%--头--%>
<%@include file="common/head.jsp" %>

<%--左边菜单--%>
<%@include file="common/leftMenu.jsp" %>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="show-top-grids">
        <h1>个人中心</h1>
    </div>


</div>

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="show-top-grids">
        <div class="col-sm-9 show-grid-left main-grids">
            <%--<div class="col-12">--%>
            <!-- 上传视频 -->
            <div class="col-12" style="display: none;" id="first">
                <h3>上传视频</h3>
                <form action="/ViedoServlet.do?action=saveViedo" class="form">
                    <div class="row" id="upload1">

                        <div class="col-12 col-md-5 form__cover">
                            <div class="row">
                                <div class="col-12 col-sm-6 col-md-12">
                                    <div class="form__img">
                                        <label for="form__img-upload">不要上传</label>
                                        <input id="form__img-upload" name="form__img-upload" type="file"
                                               accept=".png, .jpg, .jpeg" onchange="changeImg(this)">
                                        <%-- 随着表单交给ViedoServlet--%>
                                        <input type="hidden" id="imgPath"/>
                                        <%--<img id="form__img" src="#" alt=" ">--%>
                                        <img id="form__img" src="${requestScope.viedo.pic}" alt=" ">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-md-7 form__content">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form__group">
                                        <input type="text" class="form__input" placeholder="名称" id="video_name"/>
                                    </div>
                                </div>
                                <%--视频介绍--%>
                                <div class="col-12">
                                    <div class="form__group">
                                        <textarea id="text" name="text" class="form__textarea"
                                                  placeholder="视频介绍"></textarea>
                                    </div>
                                </div>

                                <div class="col-12 col-sm-6 col-lg-3">
                                    <div class="form__group">
                                        <input type="text" class="form__input" placeholder="上传者" id="upload"/>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <%--上传类型--%>
                        <div class="col-12">
                            <ul class="form__radio">
                                <li>
                                    <span>上传类型:</span>
                                </li>
                                <li>
                                    <input id="type1" type="radio" name="type" checked="" value="1">
                                    <label for="type1" id="move">电影</label>
                                </li>
                                <li>
                                    <input id="type2" type="radio" name="type" value="2">
                                    <label for="type2" id="dianshi">电视剧</label>
                                </li>
                                <li>
                                    <input id="type3" type="radio" name="type" checked="" value="3">
                                    <label for="type3" id="dongman">动漫</label>
                                </li>
                                <li>
                                    <input id="type4" type="radio" name="type" checked="" value="4">
                                    <label for="type4" id="jin">18禁</label>
                                </li>
                                <%--提示上传成功的信息--%>
                                <li><span class="errorMesg">${ msg}</span></li>
                            </ul>
                        </div>

                        <div class="col-12">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form__video">
                                        <label id="movie1" for="form__video-upload">上传视频</label>
                                        <input data-name="#movie1" id="form__video-upload" name="movie"
                                               class="form__video-upload" type="file"
                                               accept="video/mp4,video/x-m4v,video/*" onchange="changeviedo(this)">
                                        <input type="hidden" id="viedoPath"/>
                                        <%--<video id="form__viedo" src="${requestScope.viedo.path}" alt=" "></video>--%>


                                    </div>
                                </div>

                                <div class="col-12">

                                    <button type="button" class="form__btn" id="fabu">发布</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <!-- end form -->
            <%--</div>--%>

            <%--修改信息--%>
            <div class="col-12" style="display: none;" id="second">
                <h3>修改信息</h3>
                <div class="sign__wrap">
                    <div class="row">
                        <!-- details form -->
                        <div class="col-12 col-lg-6">
                            <form action="/user.do?action=message"
                                  class="sign__form sign__form--profile sign__form--first" method="post">
                                <div class="row">
                                    <div class="col-12">
                                        <h4 class="sign__title">用户</h4>
                                    </div>

                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <div class="sign__group">
                                            <label class="sign__label" for="username">用户名</label>
                                            <input id="username" type="text" name="username" class="sign__input"
                                                   placeholder="User123" value="${sessionScope.user.userName}"
                                                   readonly/>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <div class="sign__group">
                                            <label class="sign__label" for="email">邮箱</label>
                                            <input id="email" type="text" name="email" class="sign__input"
                                                   placeholder="email@email.com" value="${sessionScope.user.useremail}">
                                        </div>
                                    </div>


                                    <div class="col-12">
                                        <button class="sign__btn" type="submit">保存</button>
                                        <input style="visibility: hidden" id="username2" type="text" name="username"
                                               class="sign__input" placeholder="User123"
                                               value="${sessionScope.user.userName}" readonly/>


                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- end details form -->

                        <!-- password form -->
                        <div class="col-12 col-lg-6">
                            <form action="user.do?action=upPassword" class="sign__form sign__form--profile"
                                  method="post">
                                <div class="row">
                                    <div class="col-12">
                                        <h4 class="sign__title">修改密码</h4>
                                    </div>

                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <div class="sign__group">
                                            <label class="sign__label" for="oldpass">旧密码</label>
                                            <input id="oldpass" type="password" name="oldpass" class="sign__input">
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <div class="sign__group">
                                            <label class="sign__label" for="newpass">新密码</label>
                                            <input id="newpass" type="password" name="newpass" class="sign__input">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <button class="sign__btn" type="submit">修改</button>
                                        <input style="visibility: hidden" id="username1" type="text" name="username"
                                               class="sign__input" placeholder="User123"
                                               value="${sessionScope.user.userName}" readonly/>

                                    </div>

                                </div>
                            </form>
                        </div>
                        <!-- end password form -->


                    </div>
                    <span style="color: red; font-size: 20px">${requestScope.msg}</span>
                </div>
            </div>

            <%--收藏信息--%>
            <div class="col-12" style="display: none;" id="comedy">
                <form action="/FavoriteServlet.do?action=###" class="">
                    <div class="row">
                        <div class="col-12 col-md-5 form__cover">
                            <div class="row">
                                <div class="col-12 col-sm-6 col-md-12">

                                    <div class="top-grids">
                                        <div class="recommended-info">
                                            <h3>收藏</h3>
                                        </div>
                                        <table>
                                            <tr>
                                                <th>视频封面</th>
                                                <th>视频名称</th>
                                                <th>操作</th>
                                            </tr>
                                            <c:if test="${not empty sessionScope.favoriteListList}">
                                                <c:forEach items="${sessionScope.favoriteListList}"
                                                           var="favoriteListList">
                                                    <tr>
                                                        <td><img src=${favoriteListList.pic} alt="未加载"
                                                                 style="width: 80px;height: 50px"></td>
                                                        <td>${favoriteListList.vname}</td>
                                                            <%--<td>${favoriteListList.startTime}</td>--%>
                                                        <td><a class="deleteClass"
                                                               href="/FavoriteServlet.do?action=favoritedele&id=${favoriteListList.id}">取消收藏</a>
                                                        </td>
                                                            <%--<td><a class="deleteClass" href="">删除</a></td>--%>
                                                    </tr>
                                                </c:forEach>
                                            </c:if>
                                        </table>


                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>

                </form>

            </div>


            <%--历史记录--%>
            <div class="col-12" style="display: none;" id="historys">
                <form action="/ViedoServlet.do?action=###" class="">
                    <div class="row">
                        <div class="col-12 col-md-5 form__cover">
                            <div class="row">
                                <div class="col-12 col-sm-6 col-md-12">

                                    <div class="top-grids">
                                        <div class="recommended-info">
                                            <h3>历史</h3>
                                        </div>

                                        <table>
                                            <tr>
                                                <th>视频封面</th>
                                                <th>视频名称</th>
                                                <th>观看时间</th>
                                                <th>操作</th>
                                                <th><a class="deleteClass" href="/ViedoServlet.do?action=delAllHistory">一键清除</a></th>
                                            </tr>
                                            <%--历史的内容--%>
                                            <c:if test="${not empty sessionScope.historylist}">
                                                <c:forEach items="${sessionScope.historylist}" var="history">
                                                    <tr>
                                                        <td><img src=${history.pic} alt="未加载"
                                                                 style="width: 80px;height: 50px"></td>
                                                        <td>${history.vname}</td>
                                                        <td>${history.startTime}</td>
                                                        <td><a class="deleteClass"
                                                               href="/ViedoServlet.do?action=delHistory&id=${history.id}">删除</a>
                                                        </td>
                                                    </tr>
                                                </c:forEach>
                                            </c:if>
                                        </table>


                                        <div class="clearfix"></div>
                                        <%--<a class="deleteClass"--%>
                                        <%--href="viedoServlet?action=delete&id=${favorit.id}&pageNo=${requestScope.page.pageNo}-">删除</a>--%>
                                        <%--分页--%>
                                        <%--<%@include file="/common/page_nav.jsp" %>--%>
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>

                </form>

            </div>


        </div>
        <!-- right -->
        <div class="col-sm-1 show-grid-left main-grids"></div>
        <div class="col-md-2 show-grid-right">
            <h3>个人功能</h3>
            <div class="show-right-grids">
                <ul id="box1">
                    <li class="tv-img"><a href="#"><img src="images/mv.png" alt=""></a></li>
                    <input type="button" class="btn" value="上传视频" id="btn1"/>
                </ul>
            </div>
            <div class="show-right-grids">
                <ul id="box2">
                    <li class="tv-img"><a href="#"><img src="images/mv.png" alt=""></a></li>

                    <input type="button" class="btn" value="个人信息" id="btn2"/>

                </ul>
            </div>
            <div class="show-right-grids">
                <ul id="box3">
                    <%--<form action="/ViedoServlet.do?action=queryHIs" method="post">--%>
                    <li class="tv-img"><a href="/ViedoServlet.do?action=queryHIs"><img src="images/mv.png" alt=""></a>
                    </li>
                    <%--<li><a href="#xiju">历史记录</a></li>--%>
                    <%--<button> <a href="/ViedoServlet.do?action=queryHIs"></button>--%>
                    <input type="button" class="btn" value="历史记录" id="btn3"/>
                    <%--</form>--%>
                </ul>
            </div>
            <div class="show-right-grids">
                <ul id="box4">
                    <li class="tv-img"><a href="#comedy"><img src="images/mv.png" alt=""></a></li>
                    <input type="button" class="btn" value="个人收藏" id="btn4"/>
                </ul>
            </div>
            <div class="show-right-grids">
                <ul id="box5">
                    <li class="tv-img"><a href="#"><img src="images/mv.png" alt=""></a></li>
                    <li><a href="#love">留着</a></li>

                </ul>
            </div>


        </div>
        <div class="clearfix"></div>

        <title>foot</title>
        <!-- footer -->
        <%@include file="common/foot.jsp" %>

    </div>


</div>
</body>
<!-- JS -->
<script src="shangchuan/js/jquery-3.5.1.min.js"></script>
<script src="shangchuan/js/bootstrap.bundle.min.js"></script>
<script src="shangchuan/js/jquery.magnific-popup.min.js"></script>
<script src="shangchuan/js/smooth-scrollbar.js"></script>
<script src="shangchuan/js/select2.min.js"></script>
<script src="shangchuan/js/admin.js"></script>

<script type="text/javascript">
    //图片预览到文件夹
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#form__img').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    //图片上传
    function changeImg(obj) {

        readURL(obj);
        // 用于传输文件
        var data = new FormData();
        $.each($(obj)[0].files, function (i, file) {
            data.append('file', file);
        });
        console.log(data)

        $.ajax({
            type: "post",
            url: "http://localhost:8082/ViedoServlet.do?action=uploadImg",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: "text",
            success: function (url) {
                console.log(url)
                $("#imgPath").val(url);//将地址存储好
            }


        })
    }

    //视频上传到文件夹
    function changeviedo(obj) {
        if ($(obj).val() != '') {
            $("#movie1").text($(obj)[0].files[0].name);
        } else {
            $("#movie1").text('Upload video');
        }

        // var videoLabel = $(this).attr('data-name');
        var data = new FormData();
        $.each($(obj)[0].files, function (i, file) {
            data.append('file', file);
        });
        $.ajax({
            type: "post",
            url: "http://localhost:8082/ViedoServlet.do?action=uploadviedo",

            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: "text",
            success: function (url) {
                console.log(url)

                $("#viedoPath").val(url);//将地址存储好
                // $("#movie1").val(url);//将地址存储好
            }
        })


        // if ($(obj).val() != '') {
        //     $("#movie1").text($(this)[0].files[0].name);
        // } else {
        //     $("#movie1").text('Upload video');
        // }

    }

    //点击发布上传视频
    $("#fabu").click(function () {
        // 传输数据
        $.ajax({
            // 请求方式
            type: "post",
            // 传到后端的路径
            url: "http://localhost:8082/ViedoServlet.do?action=saveViedo",
            // 传输的数据：data,采用 键值对 的形式,先传输后缀名过去
            data: {
                "video_name": $("#video_name").val(),
                "text": $("#text").val(),
                "upload": $("#upload").val(),
                "pic": $("#imgPath").val(),
                "viedoPath": $("#viedoPath").val(),
                'imgPath': $("#imgPath").val(),
                'type': $("input[type=radio]:checked").val(),

            },
            // 指定后端传输回来的数据格式，json/text格式
            dataType: "text",
            // 后端传输回来成功时执行此函数
            success: function (url) {
                console.log(url);
                if (!url || url != "") {
                    //写
                    $("#form__img-upload").val();
                    $("#form__video-upload").val();
                    // $("#form__img").attar("src",url )//显示
                    alert("上传成功！")

                } else {
                    //清空
                    $("#form__img-upload").val("");
                    $("#form__video-upload").val();
                    $("#form__img").attr("src", "");
                    $("#form__video").attr("src", "");
                    $(obj).val('');
                }


            },
            error: function () {
                alert("上传失败，请稍后重试！")
            }
        })

    })


    //点击上传视频

</script>

<%----%>
<script type="text/javascript">
    $(function () {
        // 给删除的a 标签绑定单击事件，用于删除的确认提示操作
        $('a[class=deleteClass]').click(function () {
            // 在事件的function 函数中，有一个this 对象。这个this 对象，是当前正在响应事件的dom 对象。
            /**
             * confirm 是确认提示框函数
             * 参数是它的提示内容
             * 它有两个按钮，一个确认，一个是取消。
             * 返回true 表示点击了，确认，返回false 表示点击取消。
             */

            return confirm("你确定要删除 ?");
            // return false// 阻止元素的默认行为===不提交请求
        });

    });


    $(function () {
        //点击友情链接显示 当前的框
        /* $("#btn1").click(function(){

             $('#first').toggle(0);

         });
         $("#btn2").click(function(){
             $('#second').toggle(0);
         });
         $("#btn4").click(function(){
             $('#comedy').toggle(0);
         });*/
        $(".btn").click(function (event) {
            // location.href = "http://localhost:8082/ViedoServlet.do?action=queryHIs";

            var btnId = this.id;
            // alert(btnId);
            if (btnId == "btn1") {
                $("#first").show();
                $("#second").hide();
                $("#historys").hide();

                $("#comedy").hide();
            } else if (btnId == "btn2") {
                $("#first").hide();
                $("#second").show();
                $("#historys").hide();

                $("#comedy").hide();
            } else if (btnId == "btn3") {
                $("#first").hide();
                $("#second").hide();
                $("#historys").show();
                $("#comedy").hide();
            } else if (btnId == "btn4") {
                $("#first").hide();
                $("#second").hide();
                $("#historys").hide();

                $("#comedy").show();
            }


        })
    });


</script>
</html>
